<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value">

  <meta name="flags" content="">
  <meta content="This test verifies how calc() functions inside 6 linear-gradient(), 1 radial-gradient() and 1 conic-gradient() are computed for 'background-image'." name="assert">

  <!--

  Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle
  https://bugs.chromium.org/p/chromium/issues/detail?id=947377

  WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect
  https://bugs.webkit.org/show_bug.cgi?id=196389

  -->

  <style>
  div#target
    {
      background-image: linear-gradient(yellow, red);
      height: 100px;
    }
  </style>

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

  <div id="target"></div>

  <script>
  function startTesting()
  {

  var targetElement = document.getElementById("target");

    function verifyComputedStyle(property_name, specified_value, expected_value)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, "initial");

      /*
      The purpose of setting to the initial is to act as a fallback
      value in case the calc() function in the specified value
      fails or in case it generates an invalid value. Since we
      are running 6 consecutive tests on the same element,
      then it is necessary to 'reset' its property to the
      initial value.
      */

      targetElement.style.setProperty(property_name, specified_value);

      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

      }, `testing ${property_name}: ${specified_value}`);
    }

 /* verifyComputedStyle(property_name, specified_value, expected_value) */

    /* LINEAR */

    verifyComputedStyle(
    "background-image",
    "linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
    "linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");


    /* RADIAL */

    verifyComputedStyle(
    "background-image",
    "radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))",
    "radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)");


    /* CONIC */

    verifyComputedStyle(
    "background-image",
    "conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))",
    "conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)");

 /* verifyComputedStyle(property_name, specified_value, expected_value) */

  }

  startTesting();

  </script>
